<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./public/css/index.css">
    <link rel="stylesheet" href="./public/css/chart.css">
    <title>聊天室</title>
</head>

<body>
    <!-- 登录页面 -->
    <div class="login-box" style="display: block;">
        <div class="user-input">
            <p>用户名：</p>
            <input type="text" class="username" placeholder="请输入用户名">
        </div>
        <ul class="avatar-ul">
            <li class="now"><img src="./public/img/01.jpg" alt=""></li>
            <li><img src="./public/img/02.jpg" alt=""></li>
            <li><img src="./public/img/03.jpg" alt=""></li>
            <li><img src="./public/img/04.jpg" alt=""></li>
            <li><img src="./public/img/05.jpg" alt=""></li>
            <li><img src="./public/img/06.jpg" alt=""></li>
            <li><img src="./public/img/07.jpg" alt=""></li>
            <li><img src="./public/img/08.jpg" alt=""></li>
        </ul>
        <div class="login-btn">
            <button id="login">登录</button>
        </div>
    </div>
    <!-- 聊天页面 -->
    <div class="chart-box" style="display: none;">
        <!-- 左侧成员列表 -->
        <div class="user-list">
            <div class="user">
                <img src="" alt=""><span>name</span>
            </div>
            <hr>
            <ul class="other-user">
                <!-- <li><img src="" alt="">用户1</li> -->
            </ul>
        </div>
        <!-- 右侧聊天窗口 -->
        <div class="chart-content">
            <div class="chart-num"><span></span></div>
            <div class="bd">
                <!-- <div class="message-box" id="message-box"> -->
                    <!-- 每次用户加入或者离开，广播给所有人 -->
                    <!-- <p class="new-user"></p> -->
                    <!-- 判断是自己发的消息还是别人发的 -->
                    <!-- 自己发的在右侧 -->
                    <!-- <div class="my-msg-box">
                    <div class="my-msg"></div>
                    <img src="" alt="" class="my-avatar">
                </div> -->
                    <!-- 别人发的 -->
                    <!-- <div class="other-msg-box">
                    <img src="" alt="" class="other-avatar">
                    <div class="other-msg"></div>
                </div> -->
                <!-- </div> -->
            </div>

            <div class="send-message">
                <div class="btn">
                    <span>表情</span>
                    <span>图片</span>

                </div>
                <div class="message-div" contenteditable="true"></div>

                <div class="message">
                    <button>发送</button>
                </div>
            </div>
        </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="./public/js/index.js"></script>
    <script src="./public/js/login.js"></script>
</body>

</html>